<template>
  <div>
    <el-dialog
      width="90%"
      top="5vh"
      title="User Package Record"
      :visible.sync="show"
      :destroy-on-close="true"
      @close="closeFn"
    >
      <!-- <r-search ref="search" :searchData="searchData" :searchForm="searchForm" :searchHandle="searchHandle"
        :inline="true" /> -->
      <r-table
        :isPagination="true"
        :isHandle="true"
        :tableData="tableData"
        :tableCols="tableCols"
        :tablePage="pagination"
        :loading="tableLoading"
        :tableHandles="tableHandles"
        :isSelection="false"
        @refresh="page()"
      />
    </el-dialog>
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="700px"
      :isHandle="true"
    />
  </div>
</template>

<script>
export default {
  name: "Abnormal_record",
  data() {
    return {
      formData: {
        id: "",
        day: ""
      },
      formCols: [
        {
          type: "input",
          label: "Number Of Days Given",
          placeholder: "Please Input User Number of days given",
          width: 350,
          prop: "day"
          // remark: "天"
        }
      ],
      formRules: {
        day: [{ required: true, message: "Please Input", trigger: "blur" }]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ],
      searchData: {
        isConsume: null
      },
      searchForm: [
        {
          type: "select",
          placeholder: "UserStatus",
          prop: "isConsume",
          width: 180,
          options: [
            { label: "Nonactivated", value: 0 },
            { label: "Activated", value: 1 }
          ]
        }
      ],
      searchHandle: [
        {
          type: "primary",
          label: "Search",
          plain: true,
          handle: e => {
            this.pagination.offset = 1;
            this.pagination.limit = 10;
            this.pagination.total = 0;
            this.getData();
          }
        }
      ],

      show: false,
      row: {},
      tableLoading: false,
      tableData: [],
      tableHandles: [],
      pagination: { limit: 10, offset: 1, total: 0 },
      tableCols: [
        { label: "Order Number", prop: "orderNo" },
        { label: "Package Name", prop: "mealName" },
        { label: "Battery Type", prop: "btType" },
        {
          label: "Residue Frequency",
          prop: "num",
          formatter: e => (e.num == -1 ? "Unlimited" : e.num)
        },
        {
          label: "total Frequency",
          prop: "nums",
          formatter: e => (e.nums == -1 ? "Unlimited" : e.nums)
        },

        { label: "Package Start Time", prop: "startTime" },
        { label: "Package End Time", prop: "validityTime" },
        {
          label: "Operations",
          type: "button",
          width: 110,
          btnList: [
            {
              label: "Number Of Days Given",
              type: "primary",
              plain: true,
              // size: "mini",ww
              handle: row => {
                this.elFormDetail(row);
              }
            }
          ]
        }
      ]
    };
  },
  watch: {
    "pagination.offset": {
      handler(newValue) {
        if (newValue) {
          this.getData();
        }
      },
      deep: true // 深度监听
    },
    "pagination.limit": {
      handler(newValue) {
        if (newValue) {
          this.getData();
        }
      },
      deep: true // 深度监听
    }
  },
  mounted() {},
  methods: {
    closeFn() {
      this.show = false;
    },
    elFormDetail(row) {
      this.formData.id = row.id;
      this.elFormVisible();
    },
    async elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          let res = await this.apis.userMealGive(
            this.formData.id,
            this.formData.day
          );
          this.$message({
            type: res.code == 200 ? "success" : "error",
            message: res.msg
          });
          this.elFormVisible();
          this.getData();
        }
      });
    },
    page() {
      this.getData();
    },
    async getData() {
      let res = await this.apis.userMealListByUserId(this.row.userId || "");
      this.tableData = res.data || [];
      if (res.data.length !== 0) {
        this.pagination.total = res.data.length;
      } else {
        this.pagination.total = 0;
      }
    },
    show_funs(row) {
      console.log(222, row);
      this.pagination.offset = 1;
      this.pagination.limit = 10;
      this.pagination.total = 0;
      this.searchData.isConsume = null;
      this.row = row;
      this.show = true;
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss"></style>
